<template>
  <div class="comPage">
    <el-form :model="formData" label-position="right" label-width="auto" :rules="rules">
      <el-form-item label="医生头像：" prop="avatar" :rules="[{required: true, message: '', trigger: 'change'}]">
        <Upload :file-src="formData['avatar']"
                prop="avatar"
                :token="qiniuToken"
                title="头像上传"
                @handleSuccess="handleSuccess"
                @handleRemove="handleRemove" />
      </el-form-item>
      <el-form-item label="身份证正反面：">
        <Upload :file-src="formData['zcardimg']"
                prop="zcardimg"
                :token="qiniuToken"
                title="人像面上传"
                @handleSuccess="handleSuccess"
                @handleRemove="handleRemove" />

<!--        人物面上传 国徽面上传-->
        <Upload :file-src="formData['fcardimg']"
                prop="fcardimg"
                :token="qiniuToken"
                title="国徽面上传"
                @handleSuccess="handleSuccess"
                @handleRemove="handleRemove" />
      </el-form-item>
      <el-form-item label="医生姓名：" prop="name" :rules="[{required: true,message: '请输入医生姓名',trigger: 'blur',},]">
        <el-input v-model="formData.name" placeholder="请输入医生姓名" clearable />
      </el-form-item>
      <el-form-item label="医生手机号：" prop="mobile" :rules="[{required: true,message: '请输入医生手机号',trigger: 'blur',},]">
        <el-input v-model="formData.mobile" placeholder="请输入医生手机号" clearable />
      </el-form-item>
      <el-form-item label="CA认证姓名：" prop="ca_name">
        <el-input v-model="formData.ca_name" placeholder="请输入CA认证姓名" clearable />
      </el-form-item>
      <el-form-item label="CA认证手机号：" prop="ca_mobile">
        <el-input v-model="formData.ca_mobile" placeholder="请输入CA签名手机号" clearable />
      </el-form-item>
      <el-form-item label="证件类型：" prop="document_type" :rules="[{required: true,message: '请选择证件类型',trigger: 'change',},]">
        <el-select v-model="formData.document_type" placeholder="请选择证件类型" clearable>
          <el-option v-for="(o, ok) in Object.keys(DocumentType)" :key="ok" :label="DocumentType[o]" :value="o"  />
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码：" :rules="[{required: true,message: '',trigger: 'blur',},]">
        <el-input v-model="formData.idcard" placeholder="请输入证件号码" clearable />
      </el-form-item>
      <el-form-item label="临床工作年限：">
        <el-input v-model="formData.working_seniority" placeholder="请输入临床工作年限" clearable />
      </el-form-item>
      <el-form-item label="民族：" :rules="[{required: true,message: '',trigger: 'blur',},]">
        <el-select v-model="formData.nation_id" placeholder="请选择民族" clearable>
          <el-option v-for="(o, ok) in recoverOptions" :key="ok" :label="o.name" :value="o.id"  />
        </el-select>
      </el-form-item>
      <el-form-item label="医生职称：" :rules="[{required: true,message: '',trigger: 'blur',},]">
        <el-select v-model="formData.position_id" placeholder="请选择医生职称" clearable>
          <el-option v-for="(o, ok) in positionOptions" :key="ok" :label="o.name" :value="o.id"  />
        </el-select>
      </el-form-item>
      <el-form-item label="所属医院：" :rules="[{required: true,message: '请选择所属医院',trigger: 'blur',},]">
        <el-select v-model="formData.hospital_id" placeholder="请选择所属医院" clearable>
          <el-option v-for="(o, ok) in hospitalOptions" :key="ok" :label="o.name" :value="o.id"  />
        </el-select>
      </el-form-item>
      <el-form-item label="科室：" :rules="[{required: true,message: '请选择所属一级科室',trigger: 'blur',},]">
        <el-select v-model="formData.department_id" placeholder="请选择所属一级科室" clearable style="width: 180px;">
          <el-option v-for="(o, ok) in deptOneOptions" :key="ok" :label="o.name" :value="o.id"  />
        </el-select>
        <el-select style="width: 180px;margin-left: 10px;" v-model="formData.two_department_id" placeholder="请选择所属二级科室" clearable>
          <el-option v-for="(o, ok) in deptTwoOptions" :key="ok" :label="o.name" :value="o.id"  />
        </el-select>
      </el-form-item>
      <el-form-item label="所属诊疗科目：">
        <el-select v-model="formData.subject" placeholder="请选择所属诊疗科目" clearable>
          <el-option label="线上" value="0" />
          <el-option label="线下" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="医生执业类型：" :rules="[{required: true,message: '',trigger: 'blur',},]">
        <el-radio-group v-model="formData.doctor_type">
          <el-radio :value="1">中西医</el-radio>
          <el-radio :value="2">中医</el-radio>
          <el-radio :value="3">西医</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属线上机构：" :rules="[{required: true,message: '',trigger: 'blur',},]">
        <el-select style="width: 180px;" v-model="formData.mcn_id" placeholder="请选择线上机构" clearable>
          <el-option v-for="(o, ok) in mechanismOptions" :key="ok" :label="o.name" :value="o.id"  />
        </el-select>
      </el-form-item>
      <el-form-item label="医生标签：">
        <el-input v-model="formData.doctor_label" placeholder="请输入医生标签" clearable />
      </el-form-item>
      <el-form-item label="监管头像：">
        <Upload :file-src="formData['sdjg_avatar']"
                prop="sdjg_avatar"
                :token="qiniuToken"
                @handleSuccess="handleSuccess"
                @handleRemove="handleRemove" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
  import Upload from "@/components/Upload/index.vue"
  import { ref, onMounted } from 'vue'
  const props = defineProps({
    formData: { type: Object },
    qiniuToken: { type: String }
  })
  const emit = defineEmits(['updateForm'])
  import { recover } from "@/api/user/doctor"
  import { list as positionApi } from "@/api/baseInfo/title"
  import { list as mechanismApi } from "@/api/baseInfo/mechanism"
  import { list as hospitalApi } from "@/api/baseInfo/hospital"
  import { list as deptApi } from "@/api/baseInfo/dept"
  import { list as doctorLabelApi } from "@/api/baseInfo/doctorLabel"
  import DocumentType from "@/enums/DocumentType";
  const formSize = ref('default')
  const options = {
    quality: 1,
    noCompressIfLarger: true
  }
  const recoverOptions = ref([])
  const positionOptions = ref([])
  const mechanismOptions = ref([])
  const hospitalOptions = ref([])
  const deptOneOptions = ref([])
  const deptTwoOptions = ref([])
  const doctorLabelOptions = ref([])


  const getRecoverOptions = async () => {
    const res = await recover()
    recoverOptions.value = res.data
  }

  const getPositionOptions = async () => {
    const res = await positionApi()
    positionOptions.value = res.data.data
  }
  const getMechanismOptions = async () => {
    const res = await mechanismApi()
    mechanismOptions.value = res.data.data
  }
  const getHospitalOptions = async () => {
    const res = await hospitalApi()
    hospitalOptions.value = res.data.data
  }
  const getDeptOneOptions = async () => {
    const res = await deptApi()
    deptOneOptions.value = res.data.data
  }
  const getDeptTwoOptions = async () => {
    const res = await deptApi()
    deptTwoOptions.value = res.data.data
  }
  const getDoctorLabelOptions = async () => {
    const res = await doctorLabelApi()
    doctorLabelOptions.value = res.data.data
  }

  const handleRemove = (props) => {
    setTimeout(() => {
      emit("updateForm", "baseInfo", props, "")
    }, 200)
  }
  const handleSuccess = (prop, src) => {
    emit("updateForm", "baseInfo", prop, src)
  }

  onMounted(() => {
    getRecoverOptions()
    getDoctorLabelOptions()
    getDeptOneOptions()
    getDeptTwoOptions()
    getHospitalOptions()
    getMechanismOptions()
    getPositionOptions()
  })

</script>

<style lang="scss" scoped>

</style>
